<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--
<meta property="og:title" content="GameEditor" />
<meta property="og:description" content="GameEditor for simple games" />
<meta property="og:image" content="" />
-->

<title>litescene.js: simple example</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<style type='text/css'>
		body { background-color: #DDD;}
		h1 { color: #777; background-color: #CCC; }
	</style>

	<script type="text/javascript" src="../../litegl/external/gl-matrix-min.js"></script>
	<script type="text/javascript" src="../../litegl/build/litegl.js"></script>
	<script type="text/javascript" src="../build/litescene.js"></script>
	<script type="text/javascript">
	
	var APP = {
		cam_dist: 10,

		init: function()
		{
			try
			{
				gl = GL.create({alpha:false, premultipliedAlpha: false});
				this.glcanvas = gl.canvas;
				document.getElementById("content").appendChild(gl.canvas);
				this.gl = gl;
			}
			catch (e)
			{
				document.getElementById("content").innerHTML = "<a href='blog'><img src='preview.png' /></a>";
				return;
			}

			gl.canvas.width = 1000;
			gl.canvas.height = 800;

			//capture interaction events
			gl.captureMouse();
			gl.captureKeys(true);
			gl.ondraw = this.ondraw;
			gl.onupdate = this.onupdate;
			gl.onmousedown = this.onmousedown;
			gl.onmouseup = this.onmouseup;
			gl.onmousemove = this.onmousemove;

			ShadersManager.init("../data/shaders.xml");
			Scene.init();
			Scene.ambient_color = [0.5,0.5,0.5];
			LS.ResourcesManager.path = "assets/";

			Scene.background_color = [0.1,0.1,0.1,1];
			Scene.ambient_color = [0.2,0.2,0.2];

			var node = new LS.SceneNode("monitor");
			node.material = new Material({ textures: { color: "monitor_textura.png", anormal: "monitor_normalmap.jpg" } });
			node.loadAndSetMesh("monitor.obj");
			Scene.root.addChild(node);
			var main = node;

			node = new LS.SceneNode("screen");
			node.material = new Material({ color: [0.5,0.5,0.5], emissive: [0.0,0.0,0.0], detail:[0,256,256], specular_factor: 2, specular_gloss: 1000,
				textures: { detail:"pattern_rgb.png", 
							color: "empty-screen.png" }});
			//node.material.blending = "additive";
			node.loadAndSetMesh("screen.obj");
			main.addChild(node);
			

			//global camera
			var camera = Scene.getCamera();
			camera.center = [0,35,0];
			camera.eye = [150,40,150];
			camera.far = 1000;
			camera.near = 1;

			//light
			var light = Scene.getLight();
			light.color = [0.6,0.6,0.6];
			light.position = [0,100,150];
			light.type = Light.SPOT;
			light.spot_cone = true;
			light.far = 500;
			light.near = 20;
			light.size = 200;
			light.resolution = 2048;
			light.cast_shadows = false;
			light.hard_shadows = true;
			light.shadow_bias = 0.001;
			//Scene.light.projective_texture = "window.png";//"stained-glass.png";

			Scene.loadResources();
		},

		ondraw: function()
		{
			var idle = 0.2 * Math.sin(new Date().getTime() * 0.0005);
			var camera = Scene.getCamera();
			vec3.copy(camera.eye, [15 * (APP.cam_dist + idle),40, 15 * (APP.cam_dist + idle)]);
			Scene.render(camera, APP.render_options);
		},

		onupdate: function(dt)
		{
			var now = new Date().getTime();
			Scene.update(dt);
		},

		click_time: 0,
		clicked_node: null,

		onmousedown: function(e)
		{
			APP.click_time = getTime();

			var node = Renderer.getNodeAtCanvasPosition(Scene, Scene.getCamera(), e.mousex, e.mousey );
			if(node && node.interactive)
			{
				LEvent.trigger(node,"mousedown",e);
				APP.clicked_node = node;
			} 
		},

		onmouseup: function(e)
		{
			APP.click_time = 0;
			if(APP.clicked_node)
				LEvent.trigger(APP.clicked_node,"mouseup",e);
			 APP.clicked_node = null;
		},

		onmousemove: function(e)
		{
			if(e.dragging)
			{
				if(APP.clicked_node)
					LEvent.trigger(APP.clicked_node,"mousemove",e);
				else
				{
					var node = Scene.getNode("monitor");
					if(node)
						node.transform.rotate(e.deltax,[0,1,0]);
					APP.cam_dist += e.deltay * 0.01;
					if(APP.cam_dist < 5) APP.cam_dist = 5;
					else if(APP.cam_dist > 10) APP.cam_dist = 10;
				}
			}
		}
	}
	
	</script>
</head>
<body>

<div id="wrap">
	<div id="main">
		<h1>Mesh DEMO</h1>
		<div id="content"></div>
	</div>
</div>

<script>APP.init();</script>
</body>
</html>


